<template>
	<view class="studioNameEdit">
		<view class="content">
			<view class="title">修改工作室名称</view>
			<view class="maxlength">名称最多20个字。</view>
			<input type="text" v-model="studioName" class="inputBox" maxlength="20" placeholder="请输入工作室名称">
		</view>
		<view class="btn" @click="editName">确认修改</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import api from '@/api'
	import {  ref  } from 'vue'
	import {useStudioStoreToRefs} from "@/store/useStudioStore"
	const studioName = ref('')
	onLoad(() => {
		studioName.value = useStudioStoreToRefs.studioInfo.studio.name
	})
	
	const editName = async() => {
		if (studioName.value == '' || !studioName.value) {
			uni.showToast({
				title: '请填写工作室名称',
				icon: 'none'
			});
			return false
		}
		let res:any = await api({
		  method: 'put',
		  url: `/mall/studio`,
		  data:{
			  id:useStudioStoreToRefs.studioInfo.studio.id,
			  name:studioName.value
		  }
		})
		if (res.code !== 0) {
			uni.showToast({
				icon: 'none',
				mask: true,
				title: res.msg
			})
			return false
		}else{
			uni.showToast({
				icon: 'none',
				mask: true,
				title: '修改成功'
			})
			setTimeout(() => {
				uni.navigateBack()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
.studioNameEdit{
	height: 100vh;
	background-color: #F9F6F6;
	padding: 32rpx;
	box-sizing: border-box;
	.content{
		padding: 40rpx 32rpx;
		box-sizing: border-box;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-color: #fff;
		.title{
			font-weight: bold;
			color: #1A1A1A;
			font-size: 32rpx;
		}
		.maxlength{
			color: #7C807F;
			font-size: 28rpx;
			margin: 16rpx 0 32rpx;
		}
		.inputBox{
			background: #F9F6F6;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			height: 104rpx;
			padding-left: 32rpx;
			font-size: 30rpx;
			color: #1B2120;
		}
	}
	.btn{
		background: linear-gradient( 90deg, #FF6188 0%, #FF5252 100%);
		border-radius: 62rpx 62rpx 62rpx 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #fff;
		letter-spacing: 2rpx;
		margin-top: 24rpx;
	}
}	
</style>